@import '@fontsource/fira-sans';

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

@font-face {
  font-family: 'Twemoji Mozilla';
  src: url('assets/Twemoji.Mozilla.ttf') format('truetype');
}

:root {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

::-webkit-scrollbar {
  background: transparent;
  display: none;
}

::-webkit-scrollbar:vertical {
  width: 6px;
}

::-webkit-scrollbar:horizontal {
  height: 6px;
}

@media (width >= 640px) {
  :root {
    scrollbar-color: hsl(var(--p)) transparent;
  }

  ::-webkit-scrollbar {
    display: block;
  }

  ::-webkit-scrollbar-thumb {
    @apply rounded-box bg-primary;
  }
}
